import React, { useEffect, useState, useRef } from "react";
import { Button, Table, Popconfirm, Switch, Modal, Form } from "antd";
import axios from "axios";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import FormInput from "../../../components/user-manage/FormInput";
export default function UserList() {
  //控制模态框状态
  const [open, setOpen] = useState(false);
  //控制更新数据模态框状态
  const [updataOpen, setupdataOpen] = useState(false);
  //未来动态从后端获取 所以设置成状态比较合理
  const [dataSource, setDataSource] = useState([]);
  //控制表单选择框的角色与区域
  const [optionRole, setOptionRole] = useState([]);
  const [optionArea, setOptionArea] = useState([]);
  // 表单组件的ref 接受表单组件的实例
  const FormRef = useRef(null);
  const updataFormRef = useRef(null);
  //创建一个状态 用来管理更新表单数据时region栏是否可见
  const [isUpdateDisable, setIsUpdateDisable] = useState(false);
  //保存更新的表单数据
  const [currentUpdate, setCurrentUpdate] = useState({});

  // 获取登录用户信息
  const {
    region,
    username,
    role: { id },
  } = JSON.parse(localStorage.getItem("token"));

  //获取渲染数据
  useEffect(() => {
    const getRightList = async () => {
      //向上联查
      //获取所有用户
      const res = await axios.get("http://localhost:3000/users?_expand=role");
      // 过滤数据 判断登录用户的权限
      if (id === 1) {
        //超级管理员 赋予所有权限
        setDataSource(res.data);
      } else {
        //普通管理员 只负责自己的去哪洗那
        setDataSource([
          ...res.data.filter((item) => item.username === username),
          //区域管理员只管理自己区域中的编辑
          ...res.data.filter(
            (item) => item.region === region && item.roleId === 3
          ),
        ]);
      }
    };
    getRightList();
  }, []);

  //获取表单数据`
  useEffect(() => {
    const getFormData = async () => {
      //获取数据
      // 设置选择框的区域数据
      const formRegionRes = await axios.get("http://localhost:3000/regions");
      setOptionArea(formRegionRes.data);

      //设置选择框的角色数据
      const formRoleRes = await axios.get("http://localhost:3000/roles");
      formRoleRes.data.forEach((element) => {
        //为Select组件设置正确的label和value
        //label用于显示在下拉菜单中的文本
        //value用于表单提交时实际传递的值（这里应该使用数字ID）
        element.label = element.roleName;
        element.value = element.id;
      });
      setOptionRole(formRoleRes.data);
    };
    getFormData();
  }, []);

  //获取表单数据后向后端发送Post请求
  const handleOK = () => {
    FormRef.current.validateFields().then((res) => {
      setOpen(false);
      FormRef.current.resetFields();
      const postData = {
        ...res,
        roleState: true,
        default: false,
      };

      // 为什么我要怎这么写呢 是因为我的数据直接将服务器返回的用户对象添加到数据源，但服务器返回的对象可能只包含 roleId 而没有完整的 role 对象 所以就导致roleName显示有问题
      axios.post("http://localhost:3000/users", postData).then((response) => {
        //但是我们自己的数据并没有联查roleList数据 所以就出现了未刷新页面 roleName不显示的问题 这其实是后端的问题
        setDataSource([
          ...dataSource,
          {
            ...response.data,
            role: optionRole.filter((item) => item.id === res.roleId)[0],
          },
        ]);
      });
    });
  };

  const handleUpdate = (item) => {
    setupdataOpen(true);
    if (item.roleId === 1) {
      //禁用地区 角色是超级管理
      setIsUpdateDisable(true);
    } else {
      //取消禁用
      setIsUpdateDisable(false);
    }
    // console.log(isUpdateDisable);

    setTimeout(() => {
      updataFormRef.current.setFieldsValue(item); // 增加一定的延迟确保 Modal 已渲染
    }, 100);

    setCurrentUpdate(item);
  };

  //获取更新表单数据之后向后端发送patch补丁请求
  const handleUpdataOK = () => {
    updataFormRef.current.validateFields().then((res) => {
      setupdataOpen(false);
      //更新表单数据 重新渲染鞋面
      setDataSource(
        dataSource.map((item) => {
          // console.log(dataSource);
          // console.log(optionRole);
          //替换掉当前的item 并且
          if (item.id === currentUpdate.id) {
            return {
              ...item,
              ...res,
              // 回忆一下 这里的role是联查的时候保存的当前用户的角色信息
              role: optionRole.filter((data) => data.id === res.roleId)[0],
            };
          }
          return item;
        })
      );

      axios.patch(`http://localhost:3000/users/${currentUpdate.id}`, res);
    });
  };

  // 删除按钮
  const confirmDelete = (item) => {
    setDataSource(dataSource.filter((data) => data.id !== item.id));
    //向后端发送删除请求
    axios.delete(`http://localhost:3000/users/${item.id}`).then((err, res) => {
      console.log(err);
      console.log(res);
    });
  };

  const columns = [
    {
      title: "区域",
      dataIndex: "region",
      key: "region",
      //render函数的参数 就是当前行的数据的dataIndex对应的值
      render: (region) => {
        return region === "" ? "全球区域" : region;
      },
      filters: [
        ...optionArea.map((item) => ({
          text: item.title,
          value: item.value,
        })),
        {
          text: "全球",
          value: "全球",
        },
      ],
      onFilter: (value, record) => {
        if (value === "全球") {
          return record.region === "";
        }
        return value === record.region;
      },
    },
    {
      title: "角色名称",
      dataIndex: "role",
      key: "role",
      render: (role) => {
        return role ? role.roleName : "未知角色";
      },
      filters: optionRole.map((item) => ({
        text: item.roleName,
        value: item.roleName,
      })),
      onFilter: (value, record) => {
        return value === record.role.roleName;
      },
    },
    {
      title: "用户名",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "用户状态",
      dataIndex: "roleState",
      key: "roleState",
      render: (roleState, item) => {
        return (
          <Switch checked={roleState} disabled={item.default === true}></Switch>
        );
      },
    },
    {
      title: "操作",
      render: (item) => {
        // item就是当前行
        return (
          <>
            <Button
              icon={<EditOutlined color="blue" />}
              shape="circle"
              color="blue"
              disabled={item.default === true}
              onClick={() => handleUpdate(item)}
            ></Button>
            <Popconfirm
              title="确定删除吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={() => confirmDelete(item)}
            >
              <Button
                icon={<DeleteOutlined />}
                shape="circle"
                danger
                disabled={item.default === true}
              ></Button>
            </Popconfirm>
          </>
        );
      },
    },
  ];

  return (
    <div>
      <Button type="primary" onClick={() => setOpen(true)}>
        添加用户
      </Button>
      {/* antd表格 如果设置的数据中存在children属性 就会默认使用树形数据展示 */}
      {/* table的筛选功能 需要设置filterDropdown和onFilter属性 */}
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5,
        }}
        rowKey={(item) => item.id}
      />
      <Modal
        open={open}
        title="填写用户信息"
        okText="确定"
        cancelText="取消"
        okButtonProps={{ autoFocus: true, htmlType: "submit" }}
        onCancel={() => setOpen(false)}
        onOk={handleOK}
        destroyOnHidden
      >
        <FormInput
          ref={FormRef}
          optionRole={optionRole}
          optionArea={optionArea}
        />
      </Modal>

      <Modal
        open={updataOpen}
        title="更新用户信息"
        okText="更新"
        cancelText="取消"
        okButtonProps={{ autoFocus: true, htmlType: "submit" }}
        onCancel={() => {
          setupdataOpen(false);
        }}
        onOk={handleUpdataOK}
        destroyOnHidden
      >
        {/* isUpdateDisable用来给isDisable设置状态的  这里的isDisable只是用来判断选择的角色身份是否禁用区域*/}
        <FormInput
          ref={updataFormRef}
          optionRole={optionRole}
          optionArea={optionArea}
          isUpdateDisable={isUpdateDisable}
        />
      </Modal>
    </div>
  );
}

//您的项目使用的是antd 5.x版本，而antd 5.x对Form组件的API进行了较大改动，不再支持直接通过ref获取表单实例。
// 在antd 5.x中，正确的做法是使用Form.useForm() hook来创建表单实例，然后通过form属性传递给Form组件
//所以我被迫将版本降级到React18
// /为什么我的roleid是字符串数组 但是我直接修改element.value=element.roleName 会导致表单角色选项中的文字也变成数字
